import React, { Component } from 'react';
import { Form, Input, Button, message } from 'antd'
import { withRouter } from 'react-router-dom'
import loginApi from '../../api/login'
import commonFuc from '../../utils/commonFuc'
import './index.scss'

const FormItem = Form.Item;
const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 18 },
  };
class MyComponent extends Component {

    state = {
        readOnly: true,
        sendCodeText:'发送验证码',
        sendStatus:false,
        isSuccess:false
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                let _data = Object.assign({},values,commonFuc.getSafeObj(values));

                loginApi.getBindPhoneStatus(_data,(data)=>{
                    //修改成功
                    if(data){
                        message.success('绑定成功');
                        this.props.history.push('/forgetPass');
                    }
                })
            }
        });
    } 

    // 发送验证码
    handleSendCode = () => {
        let _data = Object.assign({},commonFuc.getSafeObj({
            phone:this.props.form.getFieldValue('phone'),
            validType:"BIND_PHONE",
        }),{
            phone:this.props.form.getFieldValue('phone'),
            validType:"BIND_PHONE",
        }
        )
        loginApi.sendCode(_data,(res)=>{
            if(res){
                //成功拿到验证码，修改“发送验证码”按钮状态,60秒倒计时      
                let _num = 60;
                let _interval =  setInterval(() => {
                    this.setState({
                        sendCodeText:`重发(${--_num}s)`,
                        sendStatus:true
                    })
                    if(_num == 0){
                        this.setState({
                            sendCodeText:"发送验证码",
                            sendStatus:false
                        })                       
                        clearInterval(_interval);
                    }
                }, 1000);      
            }
        })
    }

    // 返回上一页
    handleBack = () => {
        this.props.history.goBack();  
    }

    onFocus = () => {
        // input获取焦点，移除不可输入状态，防止浏览器预填数据
        this.setState({
            readOnly:false
        })
    }



    componentDidMount(){
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const state = this.state;
        return (
            <div className="forgetContent">
                <div className="forgetBox">
                    <p style={{fontSize:25,color:"#2d8cf0"}}>绑定手机号</p>
                    <Form onSubmit={this.handleSubmit} className="login-form">
                        <FormItem {...formItemLayout} label="用户账号">
                            {getFieldDecorator('userId', {
                                rules: [{ required: true, message: '请输入用户账号' }],
                            })(
                                <Input placeholder="账号" />
                            )}
                        </FormItem>                    
                        <FormItem {...formItemLayout} label="手机号码">
                            {getFieldDecorator('phone', {
                                rules: [{ required: true, message: '请输入手机号码' }],
                            })(
                                <Input placeholder="账号" />
                            )}
                        </FormItem>
                        <FormItem {...formItemLayout} label="验证码">   
                            {getFieldDecorator('code', {
                                rules: [{ required: true, message: '请输入验证码' }],
                            })(
                                <Input style={{ width:255,marginRight:10 }}  placeholder="验证码"/>
                            )}
                            <Button type="primary" className="login-form-button" disabled={ state.sendStatus } onClick={ this.handleSendCode } >{ state.sendCodeText }</Button>   
                        </FormItem>                                         
                        <FormItem className="tc">
                            <Button type="primary" htmlType="submit" className="mr10" >
                                提交
                            </Button>
                            <Button type="primary" className="login-form-button"  onClick={ this.handleBack }>
                                返回
                            </Button>                        
                        </FormItem>
                    </Form>                 
                </div>                       
            </div>
        )
    }
}
export default withRouter(Form.create()(MyComponent));